<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的名字</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        .bz{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: reb(243,230,241);
        }
        .shell{
            width: 90%;
            height: 700px;
            display: flex;
        }
        .box{
            flex: 1;
            overflow: hidden;
            transition: .5s;
            margin: 0 20px;
            box-shadow: 10px 10px 20px rgba(0,0,0,.5);
            border-radius: 20px;
            border: 10px solid #fff;
            background-color: #fff;
        }
        .box>img{
            width: 200%;
            height: 85%;
            object-fit: cover;
            transition: .5s;
        }
        .box>span{
            font: 200 45px '优设标题黑';
            text-align: center;
            height: 15%;
            display: 15%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box:hover{
            flex-basis: 40%;
        }
        .box:hover>img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>


    <div class="header">
        <a href="index.html">首页</a>
        <a href="about.html">关于我</a>
        <a href="img.html">我的动漫世界</a>
        <a class="active" href="yxkj.html">我的游戏空间</a>
        <a href="lxwm.html">联系我</a>
    </div>


    <div class="page-title">
        <h3>我的游戏空间</h3>
    </div>

   <div class="bz">
    <div class="shell">
        <div class="box">
            <img src="./yx1.jpg">
            <span>王者</span>
        </div>
        <div class="box">
            <img src="./yx2.jpg">
            <span>光遇</span>
        </div>
        <div class="box">
            <img src="./yx3.jpg">
            <span>火影</span>
        </div>
        <div class="box">
            <img src="./yx4.jpg">
            <span>暗区</span>
        </div>
        <div class="box">
            <img src="./yx5.jpg">
            <span>吃鸡</span>
        </div>
    </div>
   </div>



    <div class="footer2">
        <p class="ee">我的个人网站</p>
    </div>
    
</body>
</html>